// 表格组件
<template>
 <div>
  <!-- 提示条 -->
   <el-alert

    type="info"
    show-icon
    :closable="false"
    >数据一共{{counts}}条
  </el-alert>
  <!-- 回显表格 -->
   <el-table
      :data="resData"
      style="width: 100%"
      :header-cell-style="{'backgroundColor': '#fafafa','borderBottom': '2px solid #f4f4f9','height':'45px'}"
      :cell-style="{'height':'46px'}"
      >
      <el-table-column
        prop="number"
        label="试题编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="subjectID"
        label="学科"
        width="110"
        >
        <template #default="{row}">{{ row.subject}}</template>

      </el-table-column>
      <el-table-column
        prop="catalogID"
        label="目录"
        width="106">
        <template #default="{row}">{{ row.catalog}}</template>
      </el-table-column>
      <el-table-column
        prop="questionType"
        label="题型"
        width="106">
        <template #default="{row}">{{ getQuestionType (row.questionType)}}</template>
      </el-table-column>
      <el-table-column
        v-html="'<p>123</p>'"
        label="题干"
        width="280">
        <template #default="{row}" >{{ ToText (row.question)}}</template>

      </el-table-column>
      <el-table-column
        prop="addDate"
        label="录入时间"
        value-format='yyyy/MM/dd'
        width="180">
        <template #default="{row}">{{ dayFromat(row.addDate)}}</template>
      </el-table-column>
      <el-table-column
        prop="difficulty"
        label="难度"
        width="100">
        <template #default="{row}">{{ getDifficulty (row.difficulty) }}</template>
      </el-table-column>
      <el-table-column
        prop="creator"
        label="录入人"
        width="84">
      </el-table-column>
       <el-table-column
        prop="address"
        label="操作"
        width="179">
        <!-- <el-row> -->
          <template #default="{row}">
              <el-button type="primary"  :data-id='row.id' icon="el-icon-view" circle plain size="small" title="预览" @click.native="view(row)"></el-button>
              <el-button type="success"  icon="el-icon-edit" circle  plain size="small" title="修改" @click="$router.push(`/questions/new?id=${row.id}`)"></el-button>
              <el-button type="danger" icon="el-icon-delete" circle plain size="small" title="删除" @click="del(row)"></el-button>
              <el-button type="warning" icon="el-icon-check" circle plain size="small" title="加入精选" @click="selectedAdd(row)"></el-button>
             </template>
<!-- </el-row> -->
      </el-table-column>
    </el-table>
    <!-- ————————分页 -->

    <el-pagination
    background
style="margin:10px;display:flex;justify-content:flex-end"
       @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="pageSize"
      layout="  prev, pager, next,sizes, jumper"
      :total="this.counts">
    </el-pagination>
    <!-- 弹窗start -->
<el-dialog title="题目预览" :visible="dialog" width="900px" @close="isdialog">
  <el-row style="marginBottom: 10px">
    <!-- 这儿是数字，下面有方法枚举 -->
    <el-col :span="6" >【题型】：{{formatQuestionType()}}</el-col>
    <el-col :span="6">【编号】：{{dialogDate.id}}</el-col>
    <!-- {{getDifficulty(dialogDate.difficulty)}} -->
    <el-col :span="6">【难度】：{{formatDifficulty()}}</el-col>
    <el-col :span="6">【标签】：{{dialogDate.tags}}</el-col>
    </el-row>
    <el-row style=" marginBottom: 10px">
    <el-col :span="6">【学科】：{{dialogDate.subjectName}}</el-col>
    <el-col :span="6">【目录】：{{dialogDate.directoryName}}</el-col>
    <el-col :span="6">【方向】：{{dialogDate.direction}}</el-col>

    </el-row>
<hr style=" marginBottom: 20px">
<el-row style=" marginBottom: 20px">【题干】：
   <template v-html="dialogDate.question"></template>
</el-row>

<el-row style=" marginBottom: 20px">{{formatDifficulty()}} 选项：（以下选中的选项为正确答案）</el-row>
<el-row>
  <!-- 单选 -->
  <!-- v-if="dialogDate.questionType==1 -->
  <div v-if="dialogDate.questionType==='1'">
<el-radio-group >
    <el-row v-for="item in dialogDate.options"
    :key="item.id" style="margin-bottom: 20px;line-height:60px">
  <el-radio  :label="item.isRight"    >{{item.title}}</el-radio>
  <img  style="height:60px;margin-top:30px;box-sizing:border-box" :src='item.img'  v-if="item.img"
    :key="item.id">
    </el-row>
</el-radio-group>
  </div>
   <!-- 多选 -->
   <div  v-if="dialogDate.questionType==='2'">
    <el-row
    style="margin-bottom: 20px"
    v-for="item in dialogDate.options"
    :key="item.id"
    >
    <el-checkbox   :value="item.isRight===1? true:false">{{item.title}}</el-checkbox>
    </el-row>
</div>
<!-- 图片 -->

</el-row>
<hr style=" marginBottom: 20px">
 <el-row style=" marginBottom: 20px">
<el-col :span="6">【参考答案】：
  <el-button type="danger" size="small" @click="videoURL" style=" marginBottom: 20px">参考答案</el-button>
  <video v-show="isShow" :src="dialogDate.videoURL"  width='400px' height='300px' controls>
  <!-- <source :src="dialogDate.videoURL" type="video/mp4" > </video> -->
  </video>
</el-col>
</el-row>
<hr style=" marginBottom: 20px">
 <el-row >
<el-col :span="24">【答案解析】:
   <span v-html="dialogDate.answer" class="answer"></span>
</el-col>
</el-row>
<hr style=" marginBottom: 20px">
 <el-row style=" marginBottom: 20px">
<el-col :span="24">【题目备注】：{{dialogDate.remarks}}

</el-col>
</el-row>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="isdialog"  label="left">关闭</el-button>
  </div>
</el-dialog>
<!-- 弹窗end -->
 </div>
</template>

<script>
// 基础题库详情
// import { detail } from '@/api/hmmm/questions'
// 基础题库列表
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions'
// 获取二级目录：通过学科ID获取
// import { list as getdirectorysList } from '@/api/hmmm/directorys'
// 枚举
import { questionTypes, difficulty } from '@/api/hmmm/constants'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      tableData: {}, // table
      // plain: true,
      // 容量
      pageSize: 5,
      // 页码
      page: 1,
      // 总共条数
      // total: 0
      // 预览弹框
      dialog: false,
      // 单选/多选选项
      resource: '',
      // 弹窗回显
      dialogDate: { // dialog
      },
      isShow: false,
      formType: '',
      questionType: questionTypes,
      difficulty: difficulty
      // radioIsRight: 1
    }
  },
  props: [
    'resData',
    'formData',
    'counts'
  ],
  computed: {
    isRight () {
      return this.dialogDate?.options?.find(item => item === 1)?.isRight
    }
  },
  methods: {
    // 题型处理
    formatQuestionType () {
      const questionTypeObj = questionTypes.find(item => item.value === (this.dialogDate?.questionType + ''))
      return questionTypeObj?.label ? questionTypeObj?.label : '未知'
    },
    // // 难度处理
    formatDifficulty () {
      const questionTypeObj = difficulty.find(item => item.value === (this.dialogDate?.difficulty + ''))
      return questionTypeObj?.label ? questionTypeObj?.label : '未知'
    },
    // 预览,false是被选中
    async view (row) {
      // 做的双击清除已选样式
      // this.plain = !this.plain
      // console.log('选中')
      // const eId = e.target.dataset.id
      // console.log(e.target.dataset.id, 'e')
      // 获得点击的那个标签
      // const tag = document.querySelector(`button[data-id='${eId}']`)
      // console.log(tag, 'tag')
      // 清除类名
      // tag.classList.remove('el-button--primary')
      this.dialog = true
      // 获取列表
      const { data } = await detail(row)
      this.tableData = data
      this.dialogDate = data
      // console.log(this.dialogDate.options, 'this.dialogDate')
      // dialogDate.questionType
    },
    // html变文字 666
    ToText (HTML) {
      var input = HTML
      return input.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, '').replace(/<[^>]+?>/g, '').replace(/\s+/g, ' ').replace(/ /g, ' ').replace(/>/g, ' ')
    },
    // 封装获取学科列表/二级目录
    //   async gettwoLevelDirectory (subjectid, directoryname) {
    //     // items为数组数组每项对象都有二级
    //     const { data } = await getdirectorysList()
    //     console.log(data.items, '二级')
    //     return data.items
    //   }
    // 题型枚举
    getQuestionType (val) {
      // console.log(questionType, 'questionType')
      const res = questionTypes.find(item => item.value === val)
      // console.log(res)
      // console.log(res, '题型')
      // console.log(this.dialogDate, '题型枚举')
      // res是数组把不能直接.label把 我换成find了  find返回对象对不？不记得了
      // 不行换个方法写，别使一个了换啥方法
      return res.label ? res.label : '未知'
    },
    // 时间格式
    dayFromat (tiem) {
      const date = dayjs(tiem).format('YYYY-MM-DD hh:mm:ss')
      return date
    },
    // 难度枚举
    getDifficulty (val) {
      const res = difficulty.filter(item => item.value === val)
      // console.log(res, '难度')
      return res[0].label
    },
    // 封装基础题库试题类型/基础题库列表
    async getBaseList (data1) {
      const { data } = await list(data1)
      // console.log(data, '基础题库列表', 111)
      this.$emit('update:resData', data.items)
      // console.log(this.resData, 11112)
    },
    // 分页---容量改变
    handleSizeChange (val) {
      // 子组件可以直接修改父组件的值用prop传值，注意是对象才可以
      this.formData.pagesize = val
      // 页数从新回到1
      this.formData.page = 1
      // console.log(this.formData, 'formData传值后')
      // 更新到页面容量
      this.pageSize = val
      this.page = 1
      this.getBaseList(this.formData)
      // 容量改变引起
    },
    // 分页---页码改变
    handleCurrentChange (val) {
      this.formData.page = val
      this.page = val
      // console.log(`当前页 ${val} `)
      this.getBaseList(this.formData)
    },

    // 删除
    del (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
      // 删除axios
        await remove(row)
        // console.log(res, '删除axios')
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getBaseList(this.formData)
      }).catch(() => {
      })
    },
    // 加入精选
    selectedAdd (row) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        row.choiceState = 1
        // 收藏axios
        await choiceAdd(row)
        this.$message({
          type: 'success',
          message: '加入精选成功!'
        })
        this.getBaseList(this.formData)
      }).catch(() => {
      })
    },
    // 弹窗中答案按钮
    videoURL () {
      if (this.dialogDate.videoURL === '') {
        this.isShow = false
      }
      this.isShow = true
    },
    // 关闭弹窗
    isdialog () {
      this.dialog = false
      this.dialogDate = {}
      this.isShow = false
    }

  },
  async created () {
    this.formData.pagesize = this.pageSize
    this.formData.page = this.page
    await this.getBaseList(this.formData)
    // console.log(this.resData, '总共多少条')
    // console.log(this.counts, '传过来的条数')
    // 预览数据
  }

}
</script>

<style lang="scss" scoped>
::v-deep .el-alert{
  font-size: 14px;
  height: 32px;
  margin-top: 5px;
  margin-bottom: 15px;

}
::v-deep .el-table thead{
  background-color: #f4f4f5!important;
  border-bottom: 2px solid #f4f4f5;
}
.video {
  width: 400px;
  height: 300px;
}
.answer {
  position:relative;
  top: -30px;
  left: 100px;
}
.close {
  position: relative;
  left:400px
}
</style>
